<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:include page="../common/file.jsp"/>
<head>
	<!-- MenuTree -->
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/menu_list.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/menu.css">
</head>
<body>
<script type="text/javascript">
	//初始化滚动条
	$("html").niceScroll({cursorcolor:"#000000",zindex:999999,bouncescroll:true,cursoropacitymax:0.4,cursorborder:"",cursorborderradius:7,cursorwidth:"7px",background:"rgba(0,0,0,.1)",autohidemode:true,railpadding:{top:0,right:2,left:2,bottom:0}});
	//页面信息提示
	var returnMsg = "${_error}";
	var authoriMsg = "${_authoriError}";
</script>
<div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
    <ol class="breadcrumb page-breadcrumb pull-left">
        <li><i class="fa fa-home"></i>&nbsp;<a href="${pageContext.request.contextPath}/menu/list">系统管理</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;</li>
        <li class="active">菜单管理</li>
    </ol>
</div>
<div style="clear:both"></div>
<div class="main-right-content">
	<div class="main-right-div">
		<div class="main-right-query-div">
			<form id="query-form-1" action="${pageContext.request.contextPath}/menu/list" method="post">
				<div class="main-right-search row">
					<div class="col-lg-2">
					<!-- 
	                	<button type="button" class="btn btn-red btn-add">新 增</button>
	               	-->
	                </div>
				</div>
			</form>
		</div>
		<div style="clear: both;"></div>
		<div class="main-right-table-div">
			<table class="main-right-table">
				<colgroup>
					<col style="width:4%;">
					<%-- <col style="width:6%;"> --%>
					<col style="width:10%;">
					<%-- <col style="width:6%;"> --%>
					<col style="width:4%;">
					<col style="width:10%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:7%;">
				</colgroup>
				<thead>
					<tr>
						<td>序列</td>
						<!-- <td>菜单ID</td> -->
						<td>菜单名称</td>
						<!-- <td>父ID</td> -->
						<td>类型</td>
						<td>请求路径</td>
						<td>图标</td>
						<td>状态</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<c:if test="${list != null && list.size() > 0}">
					<c:forEach items="${list}" var="d" varStatus="st">
						<tr class="${d.parentId}" id="${d.menuId}">
							<%-- <td style="text-align: center;" class="tree-menuid"><span>${d.menuId}</span></td> --%>
							<%-- <c:if test="${d.parentId != '' && d.parentId != null}"> --%>
							<td style="text-align: center;"><span>${d.orderNo}</span></td>
							<%-- </c:if> --%>
							
							<c:if test="${d.parentId == '' || d.parentId == null}">
								<td style="text-align: left;" class="yijicaidan">
									<span class="tree-hit tree-expanded" value="${d.menuId}"></span>
									<span class="tree-icon tree-folder icon-company tree-folder-open"></span>
									<span style="color:#ff5a4e;font-weight:bold;font-size:14px">${d.menuName}</span>
								</td>
							</c:if>
							<c:if test="${d.parentId != '' && d.parentId != null && d.level == '1'}">
								<td style="text-align: left;" class="erjicaidan">
									<span class="tree-hit tree-expanded" value="${d.menuId}"></span>
									<span class="tree-icon tree-folder tree-folder-open icon-folder"></span>
									<span>${d.menuName}</span>
								</td>
							</c:if>
							<c:if test="${d.parentId != '' && d.parentId != null && d.level == '2'}">
								<td style="text-align: left;" class="sanjicaidan">
									<span>
										<span class="icon-img fa ${d.iconPath}"></span>
										${d.menuName}
									</span>
								</td>
							</c:if>
							<%-- <td style="text-align: center;" class="tree-parentid"><span>${d.parentId}</span></td> --%>
							<td style="text-align: center;">
								<span>
									<c:if test="${d.type == '1'}">菜单</c:if>
									<c:if test="${d.type == '2'}">按钮</c:if>
								</span>
							</td>
							<td style="text-align: center;"><span>${d.dataHref}</span></td>
							<td style="text-align: center;">
							<c:if test="${d.iconPath != '' && d.iconPath != null && d.level != '2'}">
								<div class="iamge-pre" style="width:25px;height:25px;margin:0 auto">
									<span class="fa ${d.iconPath}"></span>
								</div>
							</c:if>
							</td>
							<%-- <c:if test="${d.parentId == '' || d.parentId == null}">
								<td style="text-align: center;"><span style="color:#ff5a4e;font-weight:bold;font-size:14px">${d.orderNo}</span></td>
							</c:if> --%>
							<td style="text-align: center;">
								<c:if test="${d.status == 0}">
									<span>无效</span>
								</c:if>
								<c:if test="${d.status == 1}">
									<span>有效</span>
								</c:if>
							</td>
							<td style="text-align: center;">
							<!-- 
								<a data-id="<c:out value='${d.menuId}'/>" class="stylebuttonwee stylemedium stylesquare stylegreen row-update-btn" href="javascript:void(0);">修改</a>
							 -->
							</td>
						</tr>
					</c:forEach>
					</c:if>
					<c:if test="${list == null || list.size() <= 0}">
						<tr>
							<td colspan="9" style="padding: 5px;text-align: center;">查询无记录！</td>
						</tr>
					</c:if>
				</tbody>
			</table>
		<%@include file="../common/page.jsp" %>
		</div>
	</div>
</div>
	<script type="text/javascript">
		var ctxt = "${pageContext.request.contextPath}";
		// 新增菜单
		$('.btn-add').click(function() {
			art.dialog.open(ctxt + '/menu/create', {
				title: '新增菜单',width: 400,height: 460,lock: true,opacity: 0.3
			});
		});
		
		// 修改菜单
		$('.row-update-btn').click(function() {
			var menuId = $(this).data('id');
			art.dialog.open(ctxt + '/menu/edit?menuId='+menuId, {
				title: '修改菜单',width: 400,height: 460,lock: true,opacity: 0.3
			});
		});
		
		// 一级展开
		$('.yijicaidan .tree-hit').click(function() {
			var val=$(this).attr("class");
			var array=val.split(" ");
			var menuId = $(this).attr("value");
			if(array.length < 2) {
				return false;
			}
			if(array[1] == 'tree-collapsed') {// 展开
				// 展开子菜单
				$('tr').each(function(){
					if($(this).attr("class") == menuId) {
						$(this).css("display",'');
					}
				});
				$(this).removeClass("tree-collapsed");
				$(this).attr("class", "tree-hit tree-expanded");
			} else {// 伸缩
				// 伸缩子菜单
				$('tr').each(function(){
					if($(this).attr("class") == menuId) {
						if($(this).children(".erjicaidan").children(".tree-hit").attr("class").split(" ").length == 2) {
							$(this).children(".erjicaidan").children(".tree-hit").removeClass("tree-expanded");
							$(this).children(".erjicaidan").children(".tree-hit").attr("class", "tree-hit tree-collapsed");
						}
						$(this).css("display","none");
						var menuId2 = $(this).children(".tree-menuid").text();
						// 伸缩button
						$('tr').each(function(){
							if($(this).attr("class") == menuId2) {
								$(this).css("display","none");
							}
						});
					}
				});
				$(this).removeClass("tree-expanded");
				$(this).attr("class", "tree-hit tree-collapsed");
			}
		});
		
		// 二级展开
		$('.erjicaidan .tree-hit').click(function() {
			var val=$(this).attr("class");
			var array=val.split(" ");
			var menuId = $(this).attr("value");
			if(array.length < 2) {
				return false;
			}
			if(array[1] == 'tree-collapsed') {// 展开
				// 展开子菜单
				$('tr').each(function(){
					if($(this).attr("class") == menuId) {
						$(this).css("display",'');
					}
				});
				$(this).removeClass("tree-collapsed");
				$(this).attr("class", "tree-hit tree-expanded");
			} else {// 伸缩
				// 伸缩子菜单
				$('tr').each(function(){
					if($(this).attr("class") == menuId) {
						$(this).css("display","none");
					}
				});
				$(this).removeClass("tree-expanded");
				$(this).attr("class", "tree-hit tree-collapsed");
			}
		});
		
		// 页面初始化菜单判断
		//$(".yijicaidan span").removeClass("tree-collapsed");
		$(".yijicaidan span").removeClass("tree-expanded");
		$('tr').each(function(){
			//if($(this).children(".tree-parentid").text()!=null && $(this).children(".tree-parentid").text()!='') {
			//	$(this).css("display","none");
			//}
			$(this).children("td").children(".tree-hit").removeClass("tree-expanded");
			var menuId = $(this).children(".tree-menuid").text();
			$('tr').each(function(){
				var parentId = $(this).children(".tree-parentid").text();
				if(menuId == parentId && parentId != null && parentId != '') {
					//$("#"+parentId).children("td").children(".tree-hit").attr("class", "tree-hit tree-collapsed");
					$("#"+parentId).children("td").children(".tree-hit").attr("class", "tree-hit tree-expanded");
				}
			});
		});
	</script>
</body>